<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >社区购物</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/buybox/list' }">商品列表</el-breadcrumb-item>
        </el-breadcrumb>

          
        <el-tabs tab-position="left" style="height:100%" class="margintop20" v-if="goodlist">
            <el-col v-if="goodlist">
                <el-tabs tab-position="left" style="height:100%" >
                    <el-tab-pane v-for="(item,i) in typelist" :key="i" :label="item.text" >
                        <Items 
                            :typeobj="item"
                            :goods="goodlist"
                        > </Items>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            
        </el-tabs>
    </div>
</template>

<script>
import {goodlist,goodtypelist} from "@/api"
import Items from "./items.vue"
export default {
    components:{
        Items
    },
    data(){
        return {
            goodlist:null,
            typelist:null
        }
    },
    methods:{
        goodList(){
            goodlist()
            .then(res=>{
              
                if(res.type){
                    this.goodlist = res.result
                }
            }) 
        },
        async goodType(){
            let res = await goodtypelist()
            if(res.type){
                this.typelist = res.result
            }
            this.$nextTick(()=>{
                this.goodList()
            })
        }
    },
    mounted(){
        this.goodType()
       
    }
}
</script>